<template>
  <div class="musicvideo music-cpns-common" ref="dom">
    <div class="musicvideo-main">
      <div class="musicvideo-btm">
        <el-button
          :class="[isTog ? 'active' : '']"
          size="small"
          round
          @click="togVideo"
          >视频</el-button
        >
        <el-button
          :class="[isTog ? '' : 'active']"
          size="small"
          round
          @click="togMv"
          >MV</el-button
        >
      </div>
      <div class="title">
        <span>热门标签:</span>
        <span
          v-for="(item, index) in catlist"
          :key="index"
          style="cursor: pointer"
          :class="[curIndex === index ? 'actived' : '']"
          @click="changeMusicListCat(item.name, index)"
        >
          {{ item.name }}
          <i style="padding-right: 8px; color: #666">{{
            index === catlist.length - 1 ? '' : '|'
          }}</i>
        </span>
      </div>
      <div class="videosList">
        <template v-for="item in videosList" :key="item.id">
          <video-item
            :item="item.data"
            :wth="24"
            :topShow="false"
            :userShow="true"
            v-show="isTog"
          ></video-item>
        </template>
      </div>
      <singer-mv ref="MvRef" :configObj="configObj" v-show="!isTog"></singer-mv>
      <el-pagination
        layout="prev, pager, next"
        background
        :page-size="limit"
        :total="totals"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        v-show="!isTog"
        style="text-align: center; margin: 0 auto; margin-bottom: 20px"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getTitles, getGroup, getAllData } from '@/service/videoplay'
import verificationLogin from '@/utils/verification-login'
import { Message } from '@/utils/message'
import VideoItem from '../cpns/video-item.vue'
import SingerMv from '@/views/main/singer/cpns/singer-mv.vue'

const isTog = ref(true)
const MvRef = ref<InstanceType<typeof SingerMv>>()
const configObj = {
  playShow: false,
  topShow: false,
  cardType: 'mv',
  userShow: true,
  imgUrl: 'cover',
  wth: '24%'
}
//切换视频
const togVideo = () => {
  if (isTog.value) return
  isTog.value = true
  pullTitle()
}
//切换MV
const togMv = () => {
  if (!isTog.value) return
  isTog.value = false
  pullAll(mvTitles[curIndex.value].name, limit.value, offset.value)
  curIndex.value = 0
  offset.value = 0
  catlist.value = mvTitles
}
// 获取标题
const mvTitles = [
  { name: '内地' },
  { name: '港台' },
  { name: '欧美' },
  // { name: '韩国' },// 暂时有点问题
  { name: '日本' }
] //mv标签接口未找到 自己写的
const offset = ref(0)
const limit = ref(20)
const curIndex = ref(0)
const catlist: any = ref([])
const titleIds: any = ref([])
const pullTitle = () => {
  getTitles().then((res: any) => {
    catlist.value = res.data.splice(0, 9)
    if (catlist.value.length === 9) {
      catlist.value.forEach((result: any) => {
        titleIds.value.push(result.id)
      })
      pullGroup(titleIds.value[0], offset.value)
    }
  })
}
pullTitle()
// video
const videosList = ref<any>([])
const pullGroup = (id: number, offset: number) => {
  if (!verificationLogin()) {
    Message('请先登录！！！', 'warning')
    return
  }
  getGroup(id, offset).then((res: any) => {
    videosList.value = res.datas
  })
}
// mv
// const mvList = ref([])
const totals = ref(0)
const pullAll = (area: string, limit: number, offset: number) => {
  getAllData(area, limit, offset).then((res: any) => {
    if (res.count) {
      totals.value = res.count
    }
    // mvList.value = res.data
    MvRef.value?.setMv(res.data)
  })
}
//切换标签
const changeMusicListCat = (name: string, index: number) => {
  if (isTog.value) {
    curIndex.value = index
    pullGroup(titleIds.value[index], offset.value + 8)
  } else {
    curIndex.value = index
    currentPage.value = 1
    offset.value = 0
    pullAll(mvTitles[curIndex.value].name, limit.value, offset.value)
  }
}
// 页码
const dom = ref<HTMLElement>()
const currentPage = ref(1)
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
  offset.value = (newPage - 1) * limit.value
  pullAll(mvTitles[curIndex.value].name, limit.value, offset.value)
  //返回顶部
  dom.value!.scrollTop = 0
}
const handleSizeChange = (newLimit: number) => {
  limit.value = newLimit
  pullAll(mvTitles[curIndex.value].name, limit.value, offset.value)
}
</script>

<style scoped>
.videosList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.title {
  font-size: 13px;
  margin-top: 15px;
  color: #888;
}
.active {
  background: skyblue;
  color: #f5f5f7;
}
.actived {
  color: red;
}
.musicvideo {
  width: 100%;
  padding-top: 20px;
}
.musicvideo-main {
  width: 90%;
  margin: 0 auto;
}
.musicvideo-btm {
  display: flex;
  justify-content: center;
}
</style>
